/**
 * 计算每小时的像素宽度
 * 
 * @description 动态计算每小时宽度 (Bottom Scale - Zoom Level)，越精细的刻度每小时占用的像素越多
 * @param selectedBottomScale - 底层刻度选择
 * @param containerWidth - 容器宽度
 * @param totalHours - 总时长
 * @returns 每小时的像素宽度
 */

import { computed, ComputedRef, Ref } from 'vue'

export function useHourWidth(
  selectedBottomScale: Ref<string>,
  containerWidth: Ref<number>,
  totalHours: ComputedRef<number>
): ComputedRef<number> {
  return computed(() => {
    // 越精细的刻度，每小时占用的像素越多
    const map: Record<string, number> = {
      '15分钟': 160,
      '30分钟': 120,
      '1小时': 80,
      '2小时': 60,
      '4小时': 50,
      '8小时': 40,
      '12小时': 30
    }
    const baseWidth = map[selectedBottomScale.value] || 80

    // 如果容器宽度已知，且基础宽度计算出的总宽小于容器宽
    // 则强制拉伸，使其铺满屏幕 (Auto-fit)
    // 增加 fallback: 如果 containerWidth 没获取到，尝试用 window.innerWidth 估算 (减去左侧面板宽)
    const effectiveContainerWidth = containerWidth.value || (window.innerWidth - 340)

    if (effectiveContainerWidth > 0) {
      const minFitWidth = effectiveContainerWidth / totalHours.value
      return Math.max(baseWidth, minFitWidth)
    }

    return baseWidth
  })
}
